<template>
	<view class="content">
		<!-- 恋爱测试页面详情 -->
		
		<view class="" >
			<view class="">
				<image style="width: 750rpx; height: 450rpx;" :src="details.image" mode=""></image>
			</view>

			<view class="container">
				<view class="title">
					题目：{{details.title}}
				</view>
				<template v-if="userOptList.length != details.questionList.length">

					<view class="option-list" v-if="answer">
						<view class="question">
							{{questionList.question}}
						</view>
						<radio-group name="">
							<view class="option-item" v-for="(item,index) in questionList.optionList" :key="index">

								<label v-if="!questionList.isActive" class="radio" @tap="opt(item,index)">
									<radio color="#f6c844" role="radio" aria-disabled="false" aria-checked="false"
										:checked="questionList.isActive" />
									<text style="margin-left: 10rpx;">{{item.option}}</text>
								</label>
								<!-- <view class="" style="margin-left: 10rpx;">
   							
   						</view> -->
							</view>


						</radio-group>
					</view>

				</template>
				<view class="text" v-if="!answer">
					{{details.text}}
				</view>

				<view class="" v-if="result" style="height: 500rpx;overflow: auto;">
					<view class="title">
						{{result.answer}}
					</view>
					<view class="text">
						{{result.description}}
					</view>
				</view>

			</view>
			<view class="" v-if="result">
				<view class="">
					<view @tap="scoreBtn('准确')" class="bottom" style="bottom: 200rpx;">
						<view class="bottom-submit" style="background: #fff;border: 1rpx solid #f6c844;"
							@tap="answer = true">
							准确
						</view>
					</view>
				</view>
				<view class="">
					<view @tap="scoreBtn('不准确')" class="bottom" style="bottom: 100rpx;">
						<view class="bottom-submit" style="background: #fdf2c9;" @tap="answer = true">
							不准确
						</view>
					</view>
				</view>
			</view>
		
			<view class="bottom" v-if="!answer">
				<view class="bottom-submit" @tap="answer = true">
					开始测试
				</view>
			</view>
			<view class="bottom" v-if="userOptList.length == details.questionList.length">
				
				<view class="bottom-submit" @tap="submit">
					{{result?'重新测试':'查看结果' }}
				</view>
			</view>
			<view class="position-fixed bottom-0" style="left: 50%;transform: translateX(-50%);">
				<view style="" class="font-27 color-hui text-center mt-2">
					该小程序内容仅供娱乐
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		advertisingData11
	} from "@/mixin/advertisingData1.js"
	import {
		mixinAdvertising
	} from "@/mixin/advertising.js"
	export default {
		mixins: [advertisingData11, mixinAdvertising],
		data() {
			return {
				details: {
					questionList: []
				},
				answer: false,
				answerIndex: 0,
				questionList: {
					optionList: []
				},
				isActive: false,
				userOptList: [],
				result: "",
				userId: "",
				launchApp:false
			}
		},
		onShareAppMessage(res) {
			// title=测试你的撩妹指数&_id=1
			return {
				title: this.details.title,
				path: "/pages/test-lssue/details?title="+this.details.title + '&_id='+this.details.id,
				imageUrl: this.details.image,
				
			}
		},
		onShareTimeline(res) {
			return {
				title: this.details.title,
				path: "/pages/test-lssue/details?title="+this.details.title + '&_id='+this.details.id,
				imageUrl: this.details.image,
			}
		},
		created() {
			// #ifdef APP-PLUS
			this.getPlus()
			// #endif
			var user = uni.getStorageSync('user')
			this.user = user
		},
		onShow() {
			// #ifdef APP-PLUS
			this.getArguments()
			// #endif
		},
		onLoad(e) {
			let {
				_id,
				title,
				userId
			} = e
			this.init1()
			uni.setNavigationBarTitle({
				title: title
			})
			this.getDetails(_id)
			var _this = this
			if (userId) {
				// #ifdef MP-WEIXIN
				uni.showModal({
					title: '提示',
					content: '看完广告，获取测试结果',
					success: function (res) {
						if (res.confirm) {
							_this.kanguangao3(() => {
								_this.launchApp = true
							})
						} else if (res.cancel) {
							_this.kanguangao3(() => {
								_this.launchApp = true
							})
						}
					}
				});
			
				// uni.showToast({
				// 	title: "看完广告，获取测试结果",
				// 	icon: "none",
				// 	duration: 5000
				// })
				
				this.userId = userId
				setTimeout(() => {
					this.kanguangao3(() => {
						this.launchApp = true
					})
				}, 1000)
				// #endif
			}
		},
		methods: {
		
			kan(){
				this.kanguangao3(() => {
					this.launchApp = true
				})
			},
			getArguments: function() {
				// 处理第三方传入的参数
				// #ifdef APP-PLUS
				var param = plus.runtime.arguments;
				console.log(plus.runtime, 111111111111)
				if (param != '') {
					var total = 0
					this.userOptList.forEach(item => {
						total += Number(item.score)
					})
					var result = this.details.answerList.filter(item => {
						if (item.scoreLower <= total && item.scoreUpper >= total) {
							return item
						}
					})
					if (result.length == 0) {
						return
					}

					this.result = result[0]
				}

				// #endif
			},
			getPlus() {
				//获取当前显示的webview
				var pages = getCurrentPages()
				var page = pages[pages.length - 1]
				var currentWebview = page.$getAppWebview()
				//调用H5+APP的扩展API
				var shares = null;
				let that = this
				var pusher = plus.share.getServices(function(s) {
					shares = {};
					for (var i in s) {
						var t = s[i];
						shares[t.id] = t;
					}
					that.sweixin = shares['weixin'];
				}, function(e) {
					console.log("获取分享服务列表失败：" + e.message);
				});

				//放入当前的webview
				currentWebview.append(pusher);
			},
			dakai() {
				this.checkWeChat('gh_c0b05b86786f')
			},

			checkWeChat(id) {
				//调用微信小程序

				this.sweixin.launchMiniProgram({
					type: 0,
					id: id, //要跳转小程序的原始ID
					path: '/pages/discover/test-lssue/details?userId=true' 
				})
			},
			async scoreBtn(type) {
				if (type == '准确') {
					var where = {
						_likeCount: ++this.details._likeCount,
						likeCount: ++this.details.likeCount
					}
				} else {
					var where = {
						_likeNoCount: ++this.details._likeNoCount
					}
				}
				var data = await this.$api.setData({
					dbName: "wx_test_issue",
					whereJson: {
						id: this.details.id
					},
					dataJson: where
				})
				// if (data.updated == 1) {
					uni.showToast({
						title: "提交成功"
					})
					// setTimeout(() => {
						this.answerIndex = 0
						this.userOptList = []
						this.result = ''
						this.answer = false
					// }, 500)
				// }

			},
			async submit() {
				if (this.result) {
					this.answerIndex = 0
					this.userOptList = []
					this.result = ''
					this.answer = false
					return
				}
				var fn = async () => {
					var data = await this.$api.setData({
						dbName: "wx_test_issue",
						whereJson:{
							id: this.details.id
						},
						dataJson: {
							_viewCount: ++this.details._viewCount,
							viewCount: ++this.details.viewCount,
						}
					},true)
					var total = 0
					this.userOptList.forEach(item => {
						total += Number(item.score)
					})
					var result = this.details.answerList.filter(item => {
						if (item.scoreLower <= total && item.scoreUpper >= total) {
							return item
						}
					})
					if (result.length == 0) {
						return
					}

					this.result = result[0]
				}
				var that = this
				var advertising = uni.getStorageSync('advertising')
				if (advertising.advertisingOpen == 1) {
					uni.showModal({
						title: '提示',
						content: '需要看广告视频才能查看',
						success(res) {
							if (res.confirm) {
								
								// uni.showLoading({
								// 	title: "下载中..."
								// })
								// 获取图片信息
						
								that.kanguangao3(() => {
									fn()
								})
							
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
								
					return
				}

				fn()



			},
			opt(item, index) {
				this.userOptList.push(item)
				setTimeout(() => {
					this.answerIndex++
					if (this.details.questionList[this.answerIndex]) {
						this.questionList = this.details.questionList[this.answerIndex]
						this.questionList.isActive = true
						setTimeout(() => {
							this.questionList.isActive = false
							console.log(this.questionList)
							this.questionList = Object.assign({}, this.questionList)

						})
					}

				}, 300)


			},
			async getDetails(id) {
				console.log(id)
				var data = await this.$api.getData({
					dbName: "wx_test_issue",
					pageIndex: 1,
					pageSize: 10,
					whereJson: {
						id: id
					},
					sortRule: [
						{
							name: 'sort',
							type: 'desc'
						}
					]
				},true)
				if (data.rows.length != 0) {
					this.details = data.rows[0]
					this.questionList = this.details.questionList[this.answerIndex]

				}
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>

<style lang="scss" scoped>
	.banner {
		width: 750rpx;
		height: 450rpx;
	}

	.container {
		padding-bottom: 150rpx;
	}

	.title {
		margin-top: 30rpx;
		margin-left: 30rpx;
		line-height: 30rpx;
		font-weight: 700;
	}

	.text,
	.title {
		width: 690rpx;
		font-size: 30rpx;
	}

	.text {
		height: 30rpx;
		margin: 30rpx;
	}

	.question {
		width: 690rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 700;
	}

	.option-item {
		display: flex;
		align-items: center;
		margin: 30rpx;
		font-size: 30rpx;
	}

	.answer {
		margin-top: 30rpx;
		margin-left: 30rpx;
		line-height: 30rpx;
		font-weight: 700;
	}

	.answer,
	.description {
		width: 690rpx;
		font-size: 30rpx;
	}

	.description {
		margin: 30rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		z-index: 100rpx;
	}

	.bottom-submit {
		border-radius: 15rpx;
		background-color: #f6c844;
	}

	.bottom-like,
	.bottom-submit {
		width: 450rpx;
		height: 75rpx;
		margin: 30rpx 150rpx;
		font-size: 30rpx;
		line-height: 75rpx;
		text-align: center;
	}

	.bottom-like {
		border-radius: 15rpx;
		border: 1rpx solid #f6c844;
		color: #f6c844;
		background-color: #fff;

		.content {
			background-color: #DBDBDB;
			padding: 10px;
		}

		.bottom-unlike {
			width: 450rpx;
			height: 75rpx;
			margin: 30rpx 150rpx;
			font-size: 30rpx;
			line-height: 75rpx;
			text-align: center;
			border-radius: 15rpx;
			background-color: #fdf2c9;

			.ad-view {
				background-color: #FFFFFF;
				margin-bottom: 10px;
			}
		}
	}
</style>
